  <template>
      <div class="index-lists">
          <el-card class="!border-none" shadow="never">
              <el-form
                  ref="formRef"
                  class="mb-[-16px]"
                  :model="queryParams"
                  :inline="true"
                  label-width="244px"
              >
                  <el-collapse v-model="activeNames">
                      <el-collapse-item title="查询条件" name="1">
                          <el-form-item label="我方文号" prop="ourRef">
                              <el-input class="w-[280px]" v-model="queryParams.ourRef" />
                          </el-form-item>
                          <el-form-item label="处理事项" prop="handlingInformation">
                              <el-input class="w-[280px]" v-model="queryParams.handlingInformation" />
                          </el-form-item>
                          <el-form-item label="客户文号" prop="customerDocumentNumber">
                              <el-input
                                  class="w-[280px]"
                                  v-model="queryParams.customerDocumentNumber"
                              />
                          </el-form-item>
                          <el-form-item label="客户" prop="customerDocumentNumber">
                              <el-input
                                  class="w-[280px]"
                                  v-model="queryParams.customerDocumentNumber"
                              />
                          </el-form-item>
                          <el-form-item label="客户代码" prop="customerDocumentNumber">
                              <el-input
                                  class="w-[280px]"
                                  v-model="queryParams.customerDocumentNumber"
                              />
                          </el-form-item>
                          <el-form-item label="案件流向" prop="caseFlow">
                              <el-select v-model="queryParams.caseFlow" class="w-[280px]" clearable>
                                  <el-option label="内-内" value="1" />
                                  <el-option label="内-外" value="2" />
                                  <el-option label="外-内" value="3" />
                                  <el-option label="外-外" value="4" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="案件名称" prop="caseName">
                              <el-input class="w-[280px]" v-model="queryParams.caseName" />
                          </el-form-item>
                          <el-form-item label="案件类型" prop="caseType">
                              <el-select v-model="queryParams.caseType" class="w-[280px]" clearable>
                                  <el-option label="专利" value="1" />
                                  <el-option label="商标" value="2" />
                                  <el-option label="版权" value="3" />
                                  <el-option label="法律案件" value="4" />
                                  <el-option label="调查案" value="5" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="办理人" prop="caseType">
                              <el-select v-model="queryParams.caseType" class="w-[280px]" clearable>
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="办理时间" prop="slt">
                              <daterange-picker
                                  v-model:startTime="queryParams.createTimeStart"
                                  v-model:endTime="queryParams.createTimeEnd"
                              />
                          </el-form-item>
                          <el-form-item label="创建人" prop="created">
                              <el-select v-model="queryParams.created" class="w-[280px]" clearable>
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="创建时间" prop="createdtime">
                              <daterange-picker
                                  v-model:startTime="queryParams.createTimeStart"
                                  v-model:endTime="queryParams.createTimeEnd"
                              />
                          </el-form-item>
                          <el-form-item label="当前流程阶段" prop="created">
                              <el-select v-model="queryParams.created" class="w-[280px]" clearable>
                                  <el-option label="启动流程" value="1" />
                                  <el-option label="待递交" value="2" />
                                  <el-option label="结束" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="开发完成日期" prop="developmentCompletionDate">
                              <daterange-picker
                                  v-model:startTime="queryParams.createTimeStart"
                                  v-model:endTime="queryParams.createTimeEnd"
                              />
                          </el-form-item>
                          <el-form-item label="合同编号" prop="contractNumber">
                              <el-input class="w-[280px]" v-model="queryParams.contractNumber" />
                          </el-form-item>
                          <el-form-item label="签约单位" prop="test">
                              <el-select v-model="queryParams.test" class="w-[280px]" clearable>
                                  <el-option label="专利公司" value="1" />
                                  <el-option label="商标公司" value="2" />
                                  <el-option label="法律公司" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="是否需要纸质通知书" prop="isPapernotice">
                              <el-select
                                  v-model="queryParams.isPapernotice"
                                  class="w-[280px]"
                                  clearable
                              >
                                  <el-option label="是" value="1" />
                                  <el-option label="否" value="2" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="代理人" prop="test">
                              <el-input class="w-[280px]" v-model="queryParams.test" />
                          </el-form-item>
                          <el-form-item label="申请人" prop="test">
                              <el-input class="w-[280px]" v-model="queryParams.test" />
                          </el-form-item>
                          <el-form-item label="申请号" prop="test">
                              <el-input class="w-[280px]" v-model="queryParams.test" />
                          </el-form-item>
                          <el-form-item label="申请类型" prop="putinType">
                              <el-select v-model="queryParams.putinType" class="w-[280px]" clearable>
                                  <el-option label="发明" value="1" />
                                  <el-option label="再公告" value="2" />
                                  <el-option label="其他" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="申请日" prop="test">
                              <daterange-picker
                                  v-model:startTime="queryParams.createTimeStart"
                                  v-model:endTime="queryParams.createTimeEnd"
                              />
                          </el-form-item>
                          <el-form-item label="历史审核记录" prop="test">
                              <el-select v-model="queryParams.test" class="w-[280px]" clearable>
                                  <el-option label="请选择字典生成" value="" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="业务员" prop="test">
                              <el-select v-model="queryParams.test" class="w-[280px]" clearable>
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="案件所属分部" prop="ownershipDistributionid">
                              <el-select
                                  v-model="queryParams.ownershipDistributionid"
                                  class="w-[280px]"
                                  clearable
                              >
                                  <el-option label="深圳" value="1" />
                                  <el-option label="西安" value="2" />
                              </el-select>
                          </el-form-item>
                          <el-form-item style="padding-left: 590px">
                              <el-button type="primary" @click="resetPage">查询</el-button>
                              <el-button @click="resetParams">重置</el-button>
                          </el-form-item>
                      </el-collapse-item>
                  </el-collapse>
              </el-form>
          </el-card>
          <el-card class="!border-none mt-4" shadow="never">
              <!-- <div>
          <el-button v-perms="['case:add']" type="primary" @click="handleAdd()">
            <template #icon>
              <icon name="el-icon-Plus" />
            </template>
            新增
          </el-button>
        </div> -->
              <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists" stripe>
                  <el-table-column label="我方文号" prop="ourRef" min-width="180">
                      <template #default="{ row }">
                          <router-link
                              style="color: #409EFF"
                              :to="{
                                  path: getRoutePath('case:submitinfo'),
                                  query: {
                                      id: row.id,
                                      type: 'submitDone'
                                  }
                              }"
                          >
                              {{ row.ourRef }}
                          </router-link>
                      </template>
                  </el-table-column>
                  <el-table-column label="案件名称" prop="caseName" min-width="180" />
                  <el-table-column label="客户名称" prop="test" min-width="180" />
                  <el-table-column label="客户代码" prop="test" min-width="180" />
                  <el-table-column label="申请类型" prop="putinType" min-width="180" />
                  <el-table-column label="处理事项" prop="handlingInformation" min-width="180" />
                  <el-table-column label="内部/客户期限" prop="internalWearLife" min-width="180" />
                  <el-table-column
                      label="完成时间"
                      prop="developmentCompletionDate"
                      min-width="180"
                  />
                  <el-table-column label="案件类型" prop="caseType" min-width="180" />
                  <el-table-column label="创建人员" prop="creator" min-width="180" />
                  <el-table-column label="创建时间" prop="createTime" min-width="180" />
                  <el-table-column label="当前审核状态" prop="test" min-width="180" />
                  <el-table-column label="申请人" prop="test" min-width="180" />
                  <el-table-column label="操作" width="120" fixed="right">
                      <template #default="{ row }">
                          <el-button
                              v-perms="['case:edit']"
                              type="primary"
                              link
                              @click="handleEdit(row)"
                          >
                              编辑
                          </el-button>
                          <el-button
                              v-perms="['case:del']"
                              type="danger"
                              link
                              @click="handleDelete(row.id)"
                          >
                              删除
                          </el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="flex justify-end mt-4">
                  <pagination v-model="pager" @change="getLists" />
              </div>
          </el-card>
          <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
      </div>
  </template>
  <script lang="ts" setup name="case">
  import { caseDelete, caseLists } from '@/api/case'
  import { usePaging } from '@/hooks/usePaging'
  import feedback from '@/utils/feedback'
  import { getRoutePath } from '@/router'
  import EditPopup from './edit.vue'
  const activeNames = '1'
  const editRef = shallowRef<InstanceType<typeof EditPopup>>()
  const showEdit = ref(false)
  const queryParams = reactive({
      caseName: '',
      caseType: '',
      businessType: '',
      putinType: '',
      undertakingDepartment: '',
      conductor: '',
      taxRate: '',
      costType: '',
      cost: '',
      contributionPool: '',
      ownershipDistribution: '',
      haveCase: '',
      designatedCountry: '',
      brandType: '',
      classQuantity: '',
      quantity: '',
      officialFee: '',
      agencyFee: '',
      hirdPartyPayment: '',
      signedAmount: '',
      invoiceValue: '',
      fundsReceived: '',
      paidupDateStart: '',
      paidupDateEnd: '',
      planNumber: '',
      caseStatus: '',
      caseLink: '',
      remark: '',
      caseNameid: '',
      businessTypeid: '',
      undertakingDepartmentid: '',
      ownershipDistributionid: '',
      costTypeid: '',
      correlationTypeid: '',
      isRegister: '',
      isInvalid: '',
      isExistingcase: '',
      isPapernotice: '',
      customerDocumentNumber: '',
      copyrightType: '',
      caseFlow: '',
      countryOfOrigin: '',
      agency: '',
      proposalForm: '',
      isMaterials: '',
      isFund: '',
      initialPeriod: '',
      referenceNumber: '',
      contractNumber: '',
      budget: '',
      author: '',
      homeLocation: '',
      softwareAbbreviation: '',
      versionNumber: '',
      softwareWorkDescription: '',
      developmentCompletionDateStart: '',
      developmentCompletionDateEnd: '',
      publishedStatus: '',
      hardwareEnvironment: '',
      softwareEnvironment: '',
      programmingLanguage: '',
      sourceQuantity: '',
      functionAndArt: '',
      handlingInformation: '',
      principalDatesStart: '',
      principalDatesEnd: '',
      customerTermStart: '',
      customerTermEnd: '',
      internalWearLifeStart: '',
      internalWearLifeEnd: '',
      isStateCompensation: '',
      click: '',
      partOwner: '',
      todonote: '',
      manageDateStart: '',
      manageDateEnd: '',
      countType: '',
      numberOfPoints: '',
      addtotalstatepoint: '',
      royaltyDateStart: '',
      royaltyDateEnd: '',
      workPoints: '',
      creator: '',
      chargeType: '',
      currency: '',
      sum: '',
      advancePaymentDateStart: '',
      advancePaymentDateEnd: '',
      paymentRequestNumber: '',
      requestedDateStart: '',
      requestedDateEnd: '',
      accountsDateStart: '',
      accountsDateEnd: '',
      invoiceNumber: '',
      chargeName: '',
      chargeDepict: '',
      chargeDepictfine: '',
      extendedAmount: '',
      discountRate: '',
      count: '',
      parities: '',
      collectingCompanyAccount: '',
      collectionStatus: '',
      accountDetails: '',
      sltStart: '',
      sltEnd: '',
      externalBillingNumber: '',
      externalBillingDateStart: '',
      externalBillingDateEnd: '',
      beddingCondition: '',
      handOver: '',
      expenseNote: '',
      reductionType: '',
      actualCurrency: '',
      officialDeadlineStart: '',
      officialDeadlineEnd: '',
      ourRef: '',
      relevantCaseName: '',
      correlationType: '',
      userId: '',
      userName: '',
      updateUserId: '',
      updateUserName: ''
  })

  const { pager, getLists, resetPage, resetParams } = usePaging({
      fetchFun: caseLists,
      params: queryParams
  })

  const handleAdd = async () => {
      showEdit.value = true
      await nextTick()
      editRef.value?.open('add')
  }

  const handleEdit = async (data: any) => {
      showEdit.value = true
      await nextTick()
      editRef.value?.open('edit')
      editRef.value?.getDetail(data)
  }

  const handleDelete = async (id: number) => {
      await feedback.confirm('确定要删除？')
      await caseDelete({ id })
      feedback.msgSuccess('删除成功')
      getLists()
  }

  getLists()
  </script>
  <style scoped>
  .formEdit .el-form-item {
      width: 590px;
  }
  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }
  ::v-deep .el-collapse-item__wrap {
      padding-top: 20px;
  }
  </style>
